<template>
  <div class="home-big-box">
    <div class="head-top-box">
      <div class="head-top-left">
        <el-menu @select="handleSelect" :default-active="activeLeft" background-color="#313444" text-color="#9C9EAF" active-text-color="#00B2A9" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1">票务信息</el-menu-item>
          <!-- <el-menu-item v-if="isManager=='1'|| isManager=='2'" index="3">订单管理</el-menu-item> -->
          <el-menu-item v-if="isManager=='1'|| isManager=='2'" index="2">权限管理</el-menu-item>
        </el-menu>
      </div>
      <div class="head-top-right">
        <el-button @click="proForm.name='';proForm.pople='';proForm.popleArr=[];addpreAlert=true;" v-if="power=='1'" style="margin-right:10px" class="add-pre">新建会务</el-button>
        <el-select style="width:100%" @change="selectChange" filterable v-model="activityId" placeholder="请选择">
          <el-option v-for="item in options" :key="item.activity.activityId" :label="item.activity.title" :value="item.activity.activityId"></el-option>
        </el-select>
      </div>
    </div>
    <!-- 新建项目 -->
    <el-dialog title="新建会务" :visible.sync="addpreAlert">
      <el-form :model="proForm">
        <el-form-item label-width="100px" label="会务名称">
          <el-input v-model.trim="proForm.name" maxlength="30" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="会务负责人">
          <el-button :class="{'noPop':!proForm.pople}" style="width:100%;text-align: left;" @click="selectPople()">{{proForm.pople?proForm.pople:"请选择"}}</el-button>
        </el-form-item>
        <el-form-item label-width="100px" label="会务日期">
          <el-date-picker :clearable="false" v-model="proFormTime" style="width:100%;" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addpreAlert = false">取 消</el-button>
        <el-button @click="addpro()" :loading="loadingaddpre" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 主体部分 -->
    <div v-if="options.length!=0" class="big-main-box">
      <router-view></router-view>
    </div>
    <div v-if="power=='1'&&options.length==0" class="big-main-btn-box">
      <el-button @click="proForm.name='';proForm.pople='';proForm.popleArr=[];addpreAlert=true;" style="margin-right:10px" class="add-pre">您还没有会务，请先新建会务</el-button>
    </div>
  </div>
</template>


<script>
import GetDataFun from "./js/GetDataFun.js"; //得到一些数据的方法
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["activeTop", "leftNav"]),
    activityId: {
      get: function() {
        return this.$store.state.activityId;
      },
      set: function(newValue) {
        this.$store.state.activityId = newValue;
      }
    }
  },
  watch: {
    activeTop: {
      handler: function(val, oldVal) {
        this.activeLeft = val;
      }
    }
  },
  data() {
    return {
      isManager: sessionStorage.getItem("myPower"),
      proFormTime: "", //会务时间
      loadingaddpre: false,
      power: sessionStorage.getItem("myPower"),
      proForm: {
        name: "",
        pople: "",
        popleArr: []
      }, //添加项目表单
      addpreAlert: false, //新建项目弹框
      activeLeft: "1", //导航
      options: [] //专场信息
    };
  },
  created() {
    this.getoptionses(false, "");
  },
  methods: {
    // 选择负责人
    selectPople() {
      let t = this;
      let users = [];
      for (let j = 0; j < this.proForm.popleArr.length; j++) {
        users.push(this.proForm.popleArr[j].userId);
      }
      DingTalkPC.biz.contact.choose({
        multiple: true, //是否多选： true多选 false单选； 默认true
        users: users, //默认选中的用户列表，员工userid；成功回调中应包含该信息
        corpId: localStorage.getItem("corpId"), //企业id
        max: 1500, //人数限制，当multiple为true才生效，可选范围1-1500
        onSuccess: function(data) {
          t.proForm.popleArr = [];
          t.proForm.pople = "";
          for (let i = 0; i < data.length; i++) {
            let obj = {
              name: data[i].name,
              userId: data[i].emplId
            };
            t.proForm.pople += data[i].name + ",";
            t.proForm.popleArr.push(obj);
          }
        },
        onFail: function(err) {
          // t.$message({
          //   message: "钉钉选人api失败",
          //   type: "warning"
          // });
        }
      });
    },
    // 添加项目
    addpro() {
      if (!this.proForm.name) {
        this.$message({
          message: "请输入项目名称",
          type: "warning"
        });
        return;
      }
      // if (!this.proForm.popleArr.length) {
      //   this.$message({
      //     message: "请选择会务负责人",
      //     type: "warning"
      //   });
      //   return;
      // }
      if (!this.proFormTime[0] || !this.proFormTime[1]) {
        this.$message({
          message: "请选择会务日期",
          type: "warning"
        });
        return;
      }
      if (new Date().getTime() >= new Date(this.proFormTime[1]).getTime()) {
        this.$message({
          message: "请勿选择过去时间！",
          type: "warning"
        });
        return;
      }
      this.loadingaddpre = true;
      let subData = {
        activityId: "",
        title: this.proForm.name,
        address: "",
        startDate: this.proFormTime[0],
        endDate: this.proFormTime[1],
        userList: this.proForm.popleArr
      };
      this.$http.post("/api/isv/activity/createActivity", subData).then(
        res => {
          this.loadingaddpre = false;
          if (res.data.success) {
            this.addpreAlert = false;
            this.$message({
              type: "success",
              message: "项目添加成功!"
            });
            GetDataFun.powerManageListFun().then(res => {}, err => {});
            this.getoptionses(true, res.data.result);
          } else {
            this.$message({
              message: res.data.errorMsg || "数据提交失败",
              type: "warning"
            });
          }
        },
        err => {
          this.loadingaddpre = false;
          this.$message.error("服务器出小差了");
        }
      );
    },
    handleSelect(key, keyPath) {
      this.activeLeft = key;
      sessionStorage.setItem("session_activeTop", key);
      this.$store.dispatch("setActiveTop", key);
      if (this.activeLeft == "1") {
        this.$router.push({
          name: "ticketList"
        });
        this.$store.dispatch("setLeftNav", "ticketList");
        sessionStorage.setItem("activeL", "ticketList");
      }
      if (this.activeLeft == "2") {
        this.$router.push({
          name: "powerManage"
        });
        this.$store.dispatch("setLeftNav", "powerManage");
        sessionStorage.setItem("activeL", "powerManage");
      }
      if (this.activeLeft == "3") {
        this.$router.push({
          name: "orderDetail"
        });
        this.$store.dispatch("setLeftNav", "orderDetail");
        sessionStorage.setItem("activeL", "orderDetail");
      }
    },
    //获取所有项目场次
    getoptionses(ifAddPro, activityId) {
      this.activeLeft = sessionStorage.getItem("activeTop") || "1";
      this.$http.get("/api/isv/activity/queryAll").then(
        res => {
          if (res.data.success) {
            this.options = [];
            if (res.data.result.length) {
              this.options = res.data.result;
              let optionList = res.data.result;
              if (ifAddPro) {
                this.activityId = activityId;
                this.selectChange(this.activityId);
              } else {
                localStorage.setItem(
                  "activityId",
                  optionList[0].activity.activityId
                );
                this.$store.dispatch(
                  "setActivityId",
                  optionList[0].activity.activityId
                );
                localStorage.setItem(
                  "bannerUrl",
                  optionList[0].activity.bannerUrl
                );
                this.$store.dispatch(
                  "setBannerUrl",
                  optionList[0].activity.bannerUrl
                );

                localStorage.setItem(
                  "ticketDescription",
                  optionList[0].activity.ticketDescription
                );
                this.$store.dispatch(
                  "setTicketDescription",
                  optionList[0].activity.ticketDescription
                );

                localStorage.setItem(
                  "groupTicketNumDescription",
                  optionList[0].activity.groupNumRemark
                );
                this.$store.dispatch(
                  "setGroupTicketNumDescription",
                  optionList[0].activity.groupNumRemark
                );
                localStorage.setItem(
                  "resignationChangeNoticeContent",
                  optionList[0].activity.resignationChangeNoticeContent
                );
                this.$store.dispatch(
                  "setResignationChangeNoticeContent",
                  optionList[0].activity.resignationChangeNoticeContent
                );
                localStorage.setItem(
                  "customerServiceTel",
                  optionList[0].activity.customerServiceTel
                );
                this.$store.dispatch(
                  "setCustomerServiceTel",
                  optionList[0].activity.customerServiceTel
                );
              }
            } else {
              localStorage.setItem("activityId", "");
              this.$store.dispatch("setActivityId", "");
              localStorage.setItem("bannerUrl", "");
              this.$store.dispatch("setBannerUrl", "");
            }
            GetDataFun.getTicketList().then(res => {}, err => {});
          } else {
            this.$message({
              message: res.data.errorMsg || "项目场次数据获取失败",
              type: "warning"
            });
            localStorage.setItem("activityId", "");
            this.$store.dispatch("setActivityId", "");
          }
        },
        err => {
          this.$message.error("服务器出小差了");
        }
      );
    },
    selectChange(val) {
      console.log(val, "ggg");
      localStorage.setItem("activityId", val);
      this.$store.dispatch("setActivityId", val);

      if (this.$route.name == "forumManagement") {
        // 论坛管理
        GetDataFun.getForuList(1, 10).then(res => {}, err => {});
      } else if (this.$route.name == "priceGroup") {
        // 价格组管理
        GetDataFun.getPriceList(1, 10).then(res => {}, err => {});
      } else if (this.$route.name == "priceDetails") {
        // 价格组详情
        GetDataFun.getPriceList(1, 10).then(res => {}, err => {});
      } else if (this.$route.name == "orderDetail") {
        // // 订单信息
        // GetDataFun.getrefundList(1, 10).then(res => {}, err => {});
      } else if (this.$route.name == "fieldManagement") {
        // 字段管理
        GetDataFun.getFieldList(1, 10).then(res => {}, err => {});
      } else if (this.$route.name == "ticketList") {
        // 门票
        GetDataFun.getTicketList().then(res => {}, err => {});
      } else if (this.$route.name == "userProtocol") {
        // 购票协议
        GetDataFun.getProtocolList(1, 10, 1).then(res => {}, err => {});
      } else if (this.$route.name == "loginProtocol") {
        // 登陆协议
        GetDataFun.getProtocolList(1, 10, 2).then(res => {}, err => {});
      } else if (this.$route.name == "faceProtocol") {
        // 录脸协议
        GetDataFun.getProtocolList(1, 10, 3).then(res => {}, err => {});
      } else if (this.$route.name == "shareList") {
        // 分享列表
        GetDataFun.getShareList(1, 10, "").then(res => {}, err => {});
      } else {
        // 门票
        GetDataFun.getTicketList().then(res => {}, err => {});
      }
    }
  }
};
</script>

<style scoped>
.el-menu.el-menu--horizontal {
  border: none !important;
}
.home-big-box {
  width: 100%;
  height: auto;
}
.head-top-box {
  width: 100%;
  height: auto;
  background: #fff;
  /* border-bottom: 1px solid #f8f8f8; */
  position: fixed;
  left: 0px;
  top: 0px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  min-height: 70px;
  z-index: 99;
  background: #313444;
  padding: 0px 38px;
}
.head-top-right {
  width: auto;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
.big-main-box {
  width: 100%;
  height: auto;
  /* border: 1px solid red; */
  margin-top: 70px;
  padding: 0px 16px 36px 0;
  text-align: left;
}
.big-main-btn-box {
  width: 100%;
  height: auto;
  /* border: 1px solid red; */
  text-align: center;
  padding-top: 360px;
}
.noPop {
  color: #ccc;
}
</style>
